<template>
  <div>
    <!-- 筛选条件 -->
    <el-card style="margin: 20px 0px">
      <Category-select @getCategoryId="getCategoryId" />
    </el-card>
      <el-card>
        <!-- 列表 -->
    <div v-show="isShowTable">
      <el-button type="primary" size="default" icon="el-icon-plus" @click="saveAttr" :disabled="!category3Id">添加属性</el-button
      >
      <!-- 列表 -->
      <el-table border style="width: 100%;margin:20px 0" :data="attrList">
        <el-table-column label="序号" width="80px" type="index" align="center">
        </el-table-column>
        <el-table-column
          prop="attrName"
          label="属性名称"
          width="180px"
          align="center"
        >
        </el-table-column>
        <el-table-column prop="prop" label="属性值列表" align="center" width="width">
          <template slot-scope="{ row, $index }">
            <el-tag
              v-for="attrValueList in row.attrValueList"
              :key="attrValueList.attrId"
              type=""
              effect="plain"
              style="margin-right: 5px"
            >
              {{ attrValueList.valueName }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column
          prop="prop"
          label="操作"
          width="180px"
          align="center"
        >
        <template slot-scope="{row,$index}">
          <el-button type="warning" size="mini"  icon="el-icon-edit" @click="updataattr(row)"></el-button>
          <el-button type="danger" size="mini"  icon="el-icon-delete"></el-button>
        </template>
        </el-table-column>
      </el-table>
    </div>
      <!-- 添加修改 -->
      <div v-show="!isShowTable">

        <el-form ref="form" label-width="80px" :model="attrsaveinfo">
          <el-form-item label="属性名称" label-width="">
             <el-input style="width: 20%" v-model="attrsaveinfo.attrName"></el-input>
          </el-form-item>
          <el-button type="primary" icon="el-icon-plus" :disabled="!attrsaveinfo.attrName" @click="addAttr">添加属性</el-button>
          <el-button @click="isShowTable=true">取消</el-button>
          <!-- 表格 -->
          <el-table border style="width: 100%;margin:20px 0" :data="attrsaveinfo.attrValueList">
            <el-table-column type="index" label="序号" width="80" align="center">
            </el-table-column>
            <el-table-column label="属性值名称" width="width" align="center">
              <template slot-scope="{row,$index}">
                <el-input v-if="row.flag" v-model="row.valueName" placeholder="请输入属性值名称" size="mini" @blur="LOOKTO(row)" @keyup.native.enter="LOOKTO(row)"></el-input> 
                <span @click="upspan(row)" v-else>{{row.valueName}}</span>
              </template> 
            </el-table-column>
            <el-table-column label="操作" width="width" align="center">
              <template>
                <el-button type="danger" size="mini" icon="el-icon-delete"></el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-button type="primary" size="default" @click="attrsainfo">保存</el-button>
          <el-button @click="isShowTable=true">取消</el-button>
        </el-form>
      </div>
    </el-card>
  </div>
</template>

<script>
import CategorySelect from "@/components/CategorySelect/CategorySelect";
import cloneDeep from "lodash/cloneDeep";
export default {
  name: "Attr",
  data() {
    return {
      category1Id: "",
      category2Id: "",
      category3Id: "",
      attrList: [],
      isShowTable:true,
      attrsaveinfo:{
        attrName: "",
      //    "attrId": 0,
      // "valueName": "string"
        attrValueList: [],
        categoryId: 0,
        categoryLevel: 3,
      }
    };
  },
  components: {
    CategorySelect,
  },
  methods: {
    // 获取三级联动数据  如果数据更改，数据清空，重新保存数据
    getCategoryId({ categoryId, level }) {
      if (level == 1) {
        this.category1Id = categoryId;
        this.category2Id = "", this.category3Id = ""
      } else if (level == 2) {
        this.category2Id = categoryId;
        this.category3Id = "";
      } else {
        this.category3Id = categoryId;
        // 获取到数据后发送数据请求
        this.getAttrLists();
      }
    },
    //获取列表数据
    async getAttrLists() {
      const { category1Id, category2Id, category3Id } = this;
      let result = await this.$API.attr.getAttrList(
        category1Id,
        category2Id,
        category3Id
      );
      if (result.code == 200) {
        this.attrList = result.data;
      }
    },
    //添加数据
    saveAttr(){
      // 显示与隐藏table表单
      this.isShowTable = false
      // 清空上次列表添加数据
      this.attrsaveinfo = {
        attrName: "",
        attrValueList: [],
        categoryId: this.category3Id,
        categoryLevel: 3,
      }
    },
      // 修改商品属性
    updataattr(row){
      // 显示与隐藏table表单
        this.isShowTable = false,
        this.attrsaveinfo = cloneDeep(row)
    },
    // 添加属性
    addAttr(){
      this.attrsaveinfo.attrValueList.push({attrId: this.attrsaveinfo.id,valueName: '',flag:true})
    },
    async attrsainfo(){
      // 显示与隐藏table表单
      this.isShowTable = true
      let result = await this.$API.attr.saveAttrList(attrsaveinfo)
      console.log(result);
    },
    //添加属性列表失去焦点
    LOOKTO(row){
      row.flag = false
    },
    // 显示span标签的切换
    upspan(row){
      row.flag = true
    }


  },
};
</script>

<style lang="less"></style>
